<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>太极八卦图</title>
  </head>
  <style>
	  .app{
	    width: 100%;
	    height: 100vh;
	    background-color: #ffffff;
	    position: relative;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	  }
	  .taijibagua{
	    width: 200px;
	    height: 200px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    position: relative;
	  }
	  .taiji{
	    width: 100px;
	    height: 100px;
	    position: relative;
	    border-radius: 50%;
	    box-shadow: 0px -5px 10px 0px rgba(42,245,152,0.4), 0px 5px 10px 0px rgba(8,174,234,0.4);
	    animation: zhuan 5s linear infinite;
	  }
	  .taiji:before,.taiji:after{
	    content: '';
	    width: 100px;
	    height: 50px;
	    position: absolute;
	    background-color: #fff;
	    border-radius: 100px 100px 0 0;
	  }
	  .taiji:after{
	    top: 50px;
	    background-color: #000;
	    border-radius: 0 0 50px 50px;
	  }
	  .yu:before,.yu:after{
	    content: '';
	    width: 12px;
	    height: 12px;
	    position: absolute;
	    top: 25px;
	    left: 50px;
	    border-radius: 50%;
	    background-color: #000;
	    border: 19px solid #fff;
	    z-index: 1;
	  }
	  .yu:after{
	    left: 0;
	    background-color: #fff;
	    border: 19px solid #000;
	  }
	  @keyframes zhuan{
	    to {
	      transform: rotate(360deg);
	    }
	  }
	  .bagua{
	    width: 40px;
	    height: 5px;
	    background-color: #2AF598;
	    position: absolute;
	    top: 0;
	    transform-origin: 20px 100px;
	    animation: eff49 5s linear infinite;
	    opacity: 0.2;
	  }
	  .bagua:before,.bagua:after{
	    content: '';
	    width: 40px;
	    height: 5px;
	    background-color: #08AEEA;
	    position: absolute;
	    top: 10px;
	  }
	  .bagua:after{
	    top: 20px;
	    background-color: #000;
	  }
	  .taijibagua .bagua:nth-of-type(3){
	    transform: rotate(-45deg);
	    animation-delay: 4.375s;
	  }
	  .taijibagua .bagua:nth-of-type(4){
	    transform: rotate(-90deg);
	    animation-delay: 3.75s;
	  }
	  .taijibagua .bagua:nth-of-type(5){
	    transform: rotate(-135deg);
	    animation-delay: 3.125s;
	  }
	  .taijibagua .bagua:nth-of-type(6){
	    transform: rotate(-180deg);
	    animation-delay: 2.5s;
	  }
	  .taijibagua .bagua:nth-of-type(7){
	    transform: rotate(-225deg);
	    animation-delay: 1.875s;
	  }
	  .taijibagua .bagua:nth-of-type(8){
	    transform: rotate(-270deg);
	    animation-delay: 1.25s;
	  }
	  .taijibagua .bagua:nth-of-type(9){
	    transform: rotate(-315deg);
	    animation-delay: 0.625s;
	  }
	  .white1,.white2,.white3{
	    width: 10px;
	    height: 7px;
	    background-color: #ffffff;
	    position: absolute;
	    top: -1px;
	    left: 50%;
	    transform: translate(-50%,0);
	    z-index: 10;
	  }
	  .white2{
	    top: 10px;
	  }
	  .white3{
	    top: 20px;
	  }
	  @keyframes eff49{
	    0% {
	      opacity: 1;
	    }
	    100%{
	      opacity: 0.2;
	    }
	  }
  </style>
  <body>
    <div class="app">
      <div class="taijibagua">
        <div class="taiji">
          <div class="yu"></div>
        </div>
        <div class="bagua" title="乾 - 天">
        </div>
        <div class="bagua" title="兑 - 泽">
          <div class="white3"></div>
        </div>
        <div class="bagua" title="离 - 火">
          <div class="white2"></div>
        </div>
        <div class="bagua" title="震 - 雷">
          <div class="white2"></div>
          <div class="white3"></div>
        </div>
        <div class="bagua" title="坤 - 地">
          <div class="white1"></div>
          <div class="white2"></div>
          <div class="white3"></div>
        </div>
        <div class="bagua" title="艮 - 山">
          <div class="white1"></div>
          <div class="white2"></div>
        </div>
        <div class="bagua" title="坎 - 水">
          <div class="white1"></div>
          <div class="white3"></div>
        </div>
        <div class="bagua" title="巽 - 风">
          <div class="white1"></div>
        </div>
      </div>
    </div>
  </body>
</html>